<template>
  <div class="app-container">
    <!-- bgColor="red" color="green"  -->
    <MyHeader title="购物车-vuex"></MyHeader>
    <MyGoods :goods="item" v-for="item in list" :key="item.id"></MyGoods>
    <MyFooter></MyFooter>
  </div>
</template>

<script>
// 目标1: 自定义头部 - props 限制条件
// 1.1 在 MyHeader.vue 中定义 props, props 是一个对象, 加入限制条件
// 1.2 在子组件中使用定义的数据
// 1.3 在 App.vue 中给 MyHeader.vue 传入指定的数据

// 目标2: 发送请求获取数据
// 2.1 下载 axios 导入 main.js
// 2.2 配置基地址
// 2.3 将 axios 挂载到 Vue 的原型上
// 2.4 在 App.vue 的 created 中使用 this.$axios 发请求 /api/cart

// 目标3: 渲染数据
// 3.1 将获取到的数据保存到 data 中
// 3.2 使用 v-for 循环创建组件
// 3.3 将循环的商品对象传入子组件 MyGoods.vue
// 3.4 子组件中渲染数据

// 目标4: 勾选状态
// 4.1 在 MyGoods.vue 中将 goods.goods_state 与 checkbox 进行双向绑定
// 4.2 给 checkbox 动态绑定 id 为 goods.id
// 4.3 给 label 动态绑定 for 为 goods.id

// 目标5: 数量处理
// 5.1 在 MyGoods.vue 中将 goods 传递给 MyCount.vue
// 5.2 在 MyCount.vue 中使用 v-model 绑定数量给文本框
// 5.3 处理加号和减号按钮的自增自减
// 5.4 使用 watch 进行侦听处理越界的情况

// 目标6: 全选功能
// 6.1 在 MyFooter.vue 中使用 v-model 双向绑定计算属性 isAll
// 6.2 定义计算属性 isAll, 将 list 从 App.vue 中传给 MyFooter.vue
// 6.3 在计算属性的 set 函数中将所有数据的 goods_state 修改为全选框最新的状态
// 6.4 在计算属性的 get 函数中统计所有小选框的状态并返回

// 目标7: 数量求和
// 7.1 在 MyFooter.vue 中定义计算属性 allCount
// 7.2 将所有已选中数据的数量累加并返回 (数量值要用 .number 修饰符)

// 目标8: 总价求和
// 8.1 同上

import MyHeader from './components/MyHeader.vue'
import MyGoods from './components/MyGoods.vue'
import MyFooter from './components/MyFooter.vue'

import { mapState } from 'vuex'

export default {
  components: {
    MyHeader,
    MyGoods,
    MyFooter
  },
  created() {
    this.$store.dispatch('shopGoods/asyncList')
    console.log(this.list)
  },
  mounted() {
    console.log(this.list)
  console.log('1');  
  },
  computed: {
    ...mapState('shopGoods',['list'])
  }
};
</script>

<style lang="less" scoped>
.app-container {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>